<template>
	<view class="container">

			<uni-search-bar placeholder="请输入店铺名称" style="background-color: #fff;"
								@confirm="searchConfrim" v-model="CompanyName" @cancel="cancel" @clear="cancel">
							</uni-search-bar>
		<view class="" style="background-color: #EDEDED;padding-bottom: 20rpx;padding-top: 20rpx;">
			<view class="customer" style="margin: 0 20rpx;display: flex;align-items: center;">
				<uni-datetime-picker @change="changeDate" :clear-icon="false" v-model="range" type="daterange" />
				<view v-if="range.length!==0" @click="timeDeletChange" class=""
					style="background-color: #fff;border-radius: 50%;padding: 5rpx 13rpx;margin-left: 20rpx;">
					<uni-icons type="closeempty" size="15"></uni-icons>
				</view>
			</view>
		</view>
		<view class="content">
			<scroll-view class="scroll" style="width: 100%;" scroll-y="true" :show-scrollbar="false"
				@scrolltolower="lower">
				<view class="merchant" v-for="item in bankListData" :key="item.Id">
					<view class="bank">
						<text>{{item.BankName}}</text>
						<text>日期：{{item.CreditDate?item.CreditDate.substring(0,10):''}}</text>
					</view>
					<view class="flexBox">
						<view class="">
							提现金额:￥ {{$utils.momenyFormat(item.WithdrawalAmount)}}
						</view>
						<view class="">
							金额：￥{{$utils.momenyFormat(item.CreditAmount)}}
						</view>
					</view>
					<view class="">
						商户：{{item.CompanyName}}
					</view>
					<view class="">
						贷款方：{{item.BuerName}}
					</view>
					<uni-tag v-if="!item.State" text="可提现" type="success"></uni-tag>
					<uni-tag v-else text="已提现" type="default"></uni-tag>

				</view>
				<!-- 上拉显示更多 -->
				<view class="" style="padding-bottom: 50rpx;">
					<uniLoadMore :status="status" :contentText="contentText" :rows="bankListData"></uniLoadMore>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		// 获取交易列表数据
		GetSellerOrderList,
		GetSellerHeader,
	} from '@/api/interface.js'
	// 引入加载更多
	import uniLoadMore from '@/components/uni-load-more.vue'
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				// 加载状态
				status: "loading",
				contentText: {
					contentdown: '',
					contentrefresh: '加载中',
					contentnomore: '没有更多了'
				},
				pagination: {
					PageIndex: 1,
					PageRows: 10,
					SortField: "CreateTime",
					SortType: "desc",
				},
				StartDate: '',
				EndDate: '',
				CompanyName:'',
				Total: 0,
				keyword: '',
				// 时间范围
				range: [],
				// 查询列表数据
				searchListData: [],
				bankListData: [],
			}
		},
		onShow() {
			this.bankListData = []
			this.userInfo = uni.getStorageSync('userInfo')
			this.pagination.PageIndex = 1
			// 获取首页列表数据
			this.getBankListData()
			GetSellerHeader({
				id: this.userInfo.Id
			}).then(res => {
				if (res.Success) {
					this.headerData = res.Data
				}
			})
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.bankListData = []
			// 加载
			this.status = "loading"
			// 重置相关参数
			this.pagination.PageIndex = 1

			// 获取首页列表数据
			this.getBankListData()
			uni.stopPullDownRefresh(); //停止刷新
		},
		// 跳转
		onNavigationBarButtonTap(e) {
			this.$pageUrl('navigateTo', '/pages/user/User')
		},
		methods: {
			// 时间改变
			changeDate(e) {
				console.log('时间改变', e)
				this.StartDate = e[0];
				this.EndDate = e[1];
				this.pagination.PageIndex = 1
				this.bankListData=[]
				this.getBankListData()
			},
				// 时间清空
							timeDeletChange() {
								this.range = []
								this.StartDate = "";
								this.EndDate = "";
								this.status = "loading"
								this.pagination.PageIndex = 1
								this.bankListData = []
								this.getBankListData()
							},
									// 搜索框确认按钮
										searchConfrim(e) {
											this.status = "loading"
											this.pagination.PageIndex = 1
											this.bankListData = []
											this.getBankListData()
										},
										
										// 搜索框取消
										cancel() {
											this.status = "loading"
										    this.CompanyName = ''
											this.pagination.PageIndex = 1
											this.bankListData = []
											this.getBankListData()
										},
			// 触底
			lower(e) {
				console.log('触底了')
				if (this.bankListData.length >= this.Total) {
					this.status = "noMore"
					return
				}
				this.getBankListData()
			},
			// 获取首页银行列表数据
			getBankListData() {
				this.status = "loading"
				GetSellerOrderList({
					...this.pagination,
					Search: {
						Keyword: this.userInfo.Id,
						StartDate: this.StartDate,
						EndDate: this.EndDate,
						CompanyName:this.CompanyName
					},
					SortField: "Id",
					SortType: "desc"
				}).then(res => {
					console.log('获取首页列表数据', res.Data)
					if (res.Success) {
						// 赋值总条数
						this.Total = res.Total
						if (res.Data.length == 0) {
							this.status = "noMore"
							return
						}
						if (this.pagination.PageIndex == 1) {
							this.bankListData = res.Data
							this.pagination.PageIndex += 1
						} else {
							this.bankListData = this.bankListData.concat(res.Data)
							this.pagination.PageIndex += 1

						}
						if (this.pagination.PageRows * this.pagination.PageIndex >= this.Total) {
							// 暂停加载  没有更多了
							this.status = "noMore"
							return
						}
					} else this.$api.msg(res.Msg)
				}).catch((err) => {
					uni.showToast({
						icon: 'none',
						title: res.Msg
					})
					this.status = "noMore"
				})
			},
			// 触底
			
		
			// 获取查询列表数据
			getSearchListData() {
				this.status = "loading"
				this.$http('post', '/BO/BIlling/GetBillingData', {
					...this.pagination,
					Search: {
						CommpayId: "1620979870186082305",
						Condition: "cCusName",
						EndTime: "",
						Keyword: "",
						StartTime: ""
					}
				}).then(res => {
					if (res.Success) {
						console.log('获取客户列表数据', res.Data)
						// 赋值总条数
						this.Total = res.Total
						if (res.Data.length == 0) {
							this.status = "noMore"
							return
						}
						if (this.pagination.PageIndex == 1) {
							this.searchListData = res.Data
							this.pagination.PageIndex += 1
						} else {
							this.searchListData = this.searchListData.concat(res.Data)
							this.pagination.PageIndex += 1

						}
						uni.stopPullDownRefresh(); //停止刷新
						if (this.pagination.PageRows * this.pagination.PageIndex > this.Total) {
							// 暂停加载  没有更多了
							this.status = "noMore"
							return
						}
					} else this.$api.msg(res.Msg)
				})
			},

	
			
		}
	}
</script>

<style scoped lang="scss">
	.container {
			background-image: url(/static/background.png);
		.content {
			.scroll {
				// 兼容H5和APP
				/* #ifdef H5 */
				height: calc(100vh - 220px);
				/* #endif */
				/* #ifdef APP */
				height: calc(100vh - 235px);
				/* #endif */
			}

			.pay {
				color: #333;
				font-weight: bold;
				font-size: 16px;
				background: rgba(255, 255, 255, .3);
				margin: 10px;
				border-radius: 5px;
				padding: 5px 10px;
				color: aqua;
			}

			.flexBox {
				view {
					flex: 1;
				}
			}
			.merchant {
				background-color: rgba(255, 255, 255, .9);
				border-radius: 10px;
				box-shadow: 1px 1px 5px #ccc;
				box-sizing: border-box;
				padding: 20rpx;
				margin: 10px;

				.bank {
					display: flex;
					justify-content: space-between;
					font-weight: bold;
				}
			}
		}
	}
</style>